'use strict'

import React, { Component } from 'react'
import * as helper from '../../utilities/helper'
import * as color from '../../configs/color'
import noop from 'lodash/noop'
import * as dom from '../../utilities/dom'

const SCREEN_W = dom.getScreenSize().width

const style = {
    height: '34px',
    minWidth: SCREEN_W > 320 ? '90px' : '0',
    textAlign: 'center',
    lineHeight: '34px',
    fontSize: '16px',
    paddingLeft: '12px',
    paddingRight: '12px',
    borderRadius: '2px'
}

const themes = {
    primary: {
        backgroundColor: color.PRIMARY,
        color: color.WHITE
    },

    silent: {
        backgroundColor: color.SILENT,
        color: color.WHITE
    },

    danger: {
        borderColor: color.PRIMARY,
        color: color.PRIMARY
    },

    outline: {
        borderColor: '#CCCCC5',
        borderWidth: '1px',
        borderStyle: 'solid',
        backgroundColor: color.WHITE,
        color: color.DARK
    }
}

export default class FullButton extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div style={helper.combineStyles(style, themes, this.props.themes, this.props.style)} onClick={this.props.onClick}>
                {this.props.text}
            </div>
        )
    }
}

FullButton.defaultProps = {
    text: '点我',
    themes: 'primary',
    onClick: noop
}

FullButton.propTypes = {
    text: React.PropTypes.string.isRequired,
    themes: React.PropTypes.string,
    style: React.PropTypes.object,
    onClick: React.PropTypes.func.isRequired
}